<template>
	<view class="content">
		<view class="">
			<zhTable :hander_list='hander_list' :table_list='list' :height="1200" scroll_y :indicator_type='2'
				@scrollRight='scrollRight' @scrollBottom='scrollBottom'>
				<template v-slot:row="{row,index}">
					<view class="goods">
						<view class="goods_name">{{index + 1}}</view>
					</view>
					<view class="goods">
						<view class="goods_name">{{row.name}}</view>
					</view>
					<view class="goods">
						<view class="goods_name">{{row.gender}}</view>
					</view>
					<view class="goods">
						<view class="goods_name">{{row.age}}</view>
					</view>
					<view class="goods">
						<view class="goods_name">{{row.site}}</view>
					</view>
					<view class="goods">
						<view class="goods_name">{{row.birthplace}}</view>
					</view>
					<view class="goods">
						<view class="goods_name del">删除</view>
					</view>
				</template>
			</zhTable>
		</view>
	</view>
</template>

<script>
	import zhTable from '@/components/zh-table/zhTable/zhTable.vue'
	export default {
		components: {
			zhTable
		},
		data() {
			return {
				hander_list: [{
						id: 1,
						name: '序号'
					},
					{
						id: 2,
						name: '姓名'
					},
					{
						id: 3,
						name: '性别'
					},
					{
						id: 5,
						name: '年龄'
					},
					{
						id: 5,
						name: '地址'
					},
					{
						id: 6,
						name: '籍贯'
					},
					{
						id: 7,
						name: '操作'
					}
				],
				list: [{
						id: 1,
						name: "张三",
						gender: "男",
						age: 30,
						site: "北京市朝阳区某某路123号",
						birthplace: "山东省济南市"
					},
					{
						id: 2,
						name: "李四",
						gender: "女",
						age: 25,
						site: "上海市浦东新区某某路456号",
						birthplace: "江苏省南京市"
					},
					{
						id: 3,
						name: "王五",
						gender: "男",
						age: 35,
						site: "广州市天河区某某街789号",
						birthplace: "湖南省长沙市"
					},
					{
						id: 4,
						name: "赵六",
						gender: "女",
						age: 28,
						site: "深圳市南山区某某路101号",
						birthplace: "河北省石家庄市"
					},
					{
						id: 5,
						name: "孙七",
						gender: "男",
						age: 32,
						site: "杭州市西湖区某某巷234号",
						birthplace: "浙江省杭州市",
					},
					{
						id: 6,
						name: "周八",
						gender: "女",
						age: 27,
						site: "成都市锦江区某某路567号",
						birthplace: "四川省成都市"
					},
					{
						id: 7,
						name: "吴九",
						gender: "男",
						age: 37,
						site: "武汉市武昌区某某街890号",
						birthplace: "湖北省武汉市"
					},
					{
						id: 8,
						name: "郑十",
						gender: "女",
						age: 29,
						site: "西安市雁塔区某某路321号",
						birthplace: "陕西省西安市"
					},
					{
						id: 9,
						name: "冯一一",
						gender: "男",
						age: 34,
						site: "重庆市渝北区某某大道432号",
						birthplace: "重庆市"
					},
					{
						id: 10,
						name: "陈二二",
						gender: "女",
						age: 26,
						site: "天津市和平区某某胡同543号",
						birthplace: "天津市"
					}
				]
			};
		},
		methods: {
			scrollRight() {
				//滑动到最右边触发
				console.log('滑动到最右边触发');
			},
			scrollBottom() {
				//滑动到底部边触发
				console.log('滑动到底部边触发');
			}
		},
	};
</script>
<style lang="scss" scoped>
	.content {
		padding: 32rpx;

		.goods {
			display: flex;
			align-items: center;
			justify-content: center;

			.goods_name {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				word-break: break-all;
			}

			.del {
				color: #FA3534;
				font-size: 24rpx;
			}
		}
	}
</style>